<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>近期营业报表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <div class="block">
        <span class="demonstration">请选择日期</span>
        <el-date-picker
                v-model="dateValue"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
                @change="getTimes(dateValue)">
        </el-date-picker>
      </div>
      <div id="main" style="width: 750px;height:400px;" class="goods_cls"></div>
    </el-card>
  </div>
</template>

<script>
  import echarts from "echarts";

  export default {
    data() {
      return {
        pickerOptions: {
          //只能选择今天之前的日期
          disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e7;
          },
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            },

          }],
        },
        //日期选择
        dateValue: '',
        chartInstance: null,
        allData: null, //从服务器中获取的数据
      }
    },
    created() {
      //创建的时候就获取信息
      this.getData();
    },
    destroyed() {
      window.removeEventListener('resize',this.screenAdapter)
      this.screenAdapter()
    },
    methods:{
      //获取时间组件的操作
      async getTimes(value){
        //清除
        if(value == null){
          //赋值
          value = ''
          this.getData()
          return ;
        }
          //进行ajax请求
          let time = {
            endTime: this.rTime(this.dateValue[1]),
            startTime: this.rTime(this.dateValue[0]),
          }
          const {data:res} = await this.$http.get("mreport/anyTime",{
            params: time
          })
        // console.log(res);
        if (res.meta.status !== 200) {
            return this.$message.error("发生错误了");
          }
        // console.log(res.data);
        this.allData = res.data
        this.updateChart()
      },
      //转换日期的函数
      rTime(date){
        var json_date = new Date(date).toJSON();
        return new Date(new Date(json_date) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
      },
      initChart(){
        //获取div容器绑定echarts
        this.chartInstance = echarts.init(document.getElementById("main"));
        const initOption = {}
        this.chartInstance.setOption(initOption)
      },
      async getData(){
        //进行ajax请求
        const {data:res} = await this.$http.get("mreport/week")

        if (res.meta.status !== 200) {
          return this.$message.error("发生错误了");
        }
        // console.log(res.data);
        this.allData = res.data
        //对allData进行赋值
        this.updateChart()
      },
      updateChart(){
        //x轴的数据 商品名称 回调函数
        const sellerNames = this.allData.map((item) => {
          return item.date
        })
        //y轴的数据 商品库存
        const sellValues = this.allData.map((item) => {
          return item.totalMoney
        })
        const dataOption = {
          //工具提示
          tooltip: {
            trigger: 'axis'
          },
          //线条颜色
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0,0,0,1,[
              {
                offset: 0,
                color: '#5052EE'
              }, //%0颜色的值
              {
                offset: 1,
                color: '#AB6EE5'
              } //100%
            ])
          },
          xAxis: {
            type: 'category',
            // data: this.title
            data: sellerNames
          },
          yAxis: {
            type: 'value'
          },
          grid: {
            left:'3%',
            right:'5%',
            bottom:'3%',
            containLabel:true
          },
          series: [{
            // data: this.money,
            data: sellValues,
            type: 'line'
          }]
        };
        this.chartInstance.setOption(dataOption)
      },
      screenAdapter(){
        const adapterOption = {}
        this.chartInstance.setOption(adapterOption)
        this.chartInstance.resize()
      }
    },
    mounted() {
      // 基于准备好的dom，初始化echarts实例
      this.initChart()
      this.getData()
      window.addEventListener('resize',this.screenAdapter)
      //在页面加载完成的时候主动进行屏幕的适配
      this.screenAdapter()
    }
  };
</script>

<style lang="less" scoped>
  .block{
    width: 700px;
    height: 50px;
    background: #F8F8FF;
    margin: 0 auto;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .demonstration{
    font-size: 20px;
    background-image: linear-gradient(135deg,red,blue);
    -webkit-background-clip:text;
    color: transparent;
    margin-right: 10px;
  }
  .goods_cls{
    margin: 0 auto;
    text-align: center;
  }
</style>
